<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美文章页面</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        header {
            position: relative;
            height: 300px;
            /* 你可以根据需要调整封面高度 */
            background: url('./82bef19feda657968fa9c0489dcb0406aa8801d9.jpg@672w_378h_1c_!web-home-common-cover.avif') no-repeat center center / cover;
            /* 替换为你的封面图路径 */
            color: white;
            /* 标题和简介的颜色 */
            text-align: center;
        }

        .cover {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* 水平垂直居中 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            /* 文字阴影，增强层次感 */
        }

        .title {
            font-size: 36px;
            margin: 0;
        }

        .intro {
            font-size: 18px;
            margin-top: 10px;
        }

        main {
            padding: 20px;
        }

        .content {
            /* 可以根据需要添加更多的样式 */
        }
    </style>
</head>

<body>
    <header>
        <div class="cover">
            <h1 class="title">文章标题</h1>
            <p class="intro">文章简介，简要描述文章内容...</p>
        </div>
    </header>
    <main>
        <div class="content">
            <h2>正文标题</h2>
            <p>这里是正文内容，可以包含多个段落...</p>
        </div>
    </main>
</body>

</html>